<template>
    <view style="padding-bottom: 30rpx;">
        <!-- 搜索框 -->
        <view style="position: fixed; top: 85rpx; left: 0; width: 100%; background-color: white; z-index: 100; padding: 20rpx 30rpx 10rpx 30rpx; box-sizing: border-box;">
            <view style="display: flex; align-items: center; background-color: #f5f5f5; border-radius: 10rpx; padding: 10rpx 20rpx;">
                <text class="iconfont icon-search" style="margin-right: 10rpx; color: #999;"></text>
                <input 
                    type="text" 
                    v-model="searchKey" 
                    placeholder="请输入卡号、状态或类型搜索" 
                    style="flex: 1; font-size: 26rpx; background-color: transparent;"
                    @confirm="handleSearch"
                />
                <view @click="clearSearch" style="margin-left: 20rpx; color: #999; font-size: 24rpx;">
                    <text class="iconfont icon-close">×</text> <!-- 添加备用字符 -->
                </view>
            </view>
			<view style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 25rpx 30rpx 0 30rpx; font-size: 25rpx;">
			    <view>卡号</view>
			    <view>卡状态</view>
			    <view>剩余次数</view>
			    <view>类型</view>
			    <view>下次兑换时间</view>
			    <view>有效期</view>
			</view>
        </view>
			<!-- 流水明细的显示 -->
        <view v-if="lipinkalist.length" style="display: flex; font-size: 25rpx; padding-bottom:10rpx; box-shadow: 1px 1px 5px #c2c2c2; border-radius: 15rpx; width: 730rpx; margin:150rpx auto 50rpx auto; flex-direction: column;">
            <view v-for="(item, index) in lipinkalist" :key="index">
                <view style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 20rpx 35rpx;">
                    <view>{{item.kahao}}</view>
                    <view :style="{ color: item.kazhuangtai === 0 ? 'red' : 'green' }">
                        {{ item.kazhuangtai === 0 ? "未激活" : "正常" }}
                    </view>
                    <view>{{item.shengyu}}</view>
                    <view>{{item.leixing}}</view>
                    <view style="font-size: 23rpx;">
                        {{item.next_duihuantime ? item.next_duihuantime.slice(2, 10) : "随时可兑"}}
                    </view>
                    <view style="font-size: 23rpx;">
                        {{item.youxiaoqi.slice(2, 10)}}
                    </view>
                </view>
                <view v-if="lipinkalist.length != index + 1" style="display: flex; width: 700rpx; height: 2rpx; margin: 0 auto; background-color: lightgray;"></view>
            </view>
        </view>

        <view v-else style="text-align: center; padding-top: 100rpx; font-size: 28rpx; color: #999;">
            <text class="iconfont icon-empty" style="font-size: 80rpx; display: block; margin-bottom: 20rpx;">∅</text> <!-- 添加备用字符 -->
            <text>暂无匹配的数据</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            page: 1,
            quankezx_name_tel: {},
            lipinkalist: [],
            searchKey: '',
            isLoading: false,
            hasMore: true
        }
    },
    onLoad() {
        this.quankezx_name_tel = uni.getStorageSync('quankezx_name_tel');
        this.get_kalist();
    },
    // 上拉触底
    onReachBottom() {
        if (this.hasMore && !this.isLoading) {
            this.page += 1;
            this.get_kalist();
        }
    },
    methods: {
        get_kalist() {
            if (this.isLoading) return;
            
            this.isLoading = true;
            uni.showLoading({
                title: '加载中...'
            });
            
            // 构建搜索条件
            const tiaojian = {
                user_id: this.quankezx_name_tel._id
            };
            
            // 添加搜索关键词条件
            if (this.searchKey.trim()) {
                tiaojian.$or = [
                    { kahao: { $regex: this.searchKey.trim(), $options: 'i' } },
                    { leixing: { $regex: this.searchKey.trim(), $options: 'i' } }
                ];
                
                // 添加状态搜索条件
                if (this.searchKey.trim() === '未激活' || this.searchKey.trim() === '正常') {
                    tiaojian.$or.push({
                        kazhuangtai: this.searchKey.trim() === '未激活' ? 0 : 1
                    });
                }
            }
            
            uniCloud.callFunction({
                name: "fun1",
                data: {
                    leixing: 4,
                    skip: (this.page - 1) * 50,
                    limit: 50,
                    tiaojian: tiaojian
                }
            }).then(res => {
                uni.hideLoading();
                this.isLoading = false;
                
                if (!res.result || !res.result.data) {
                    this.hasMore = false;
                    uni.showToast({
                        title: "获取数据失败",
                        icon: "none"
                    });
                    return;
                }
                
                if (res.result.data.length === 0) {
                    this.hasMore = false;
                    if (this.page === 1) {
                        this.lipinkalist = [];
                        uni.showToast({
                            title: "暂无匹配数据",
                            icon: "none"
                        });
                    } else {
                        uni.showToast({
                            title: "没有更多数据了",
                            icon: "none"
                        });
                    }
                } else {
                    if (this.page === 1) {
                        this.lipinkalist = res.result.data;
                    } else {
                        this.lipinkalist = this.lipinkalist.concat(res.result.data);
                    }
                    this.hasMore = res.result.data.length === 50; // 如果返回的数据不足50条，说明没有更多数据了
                }
                console.log("获取卡列表成功", res);
            }).catch(err => {
                uni.hideLoading();
                this.isLoading = false;
                this.hasMore = false;
                uni.showToast({
                    title: "加载失败，请重试",
                    icon: "none"
                });
                console.error("获取卡列表失败:", err);
            });
        },
        
        handleSearch() {
            if (!this.searchKey.trim()) {
                uni.showToast({
                    title: '请输入搜索内容',
                    icon: 'none'
                });
                return;
            }
            
            this.page = 1;
            this.hasMore = true;
            this.get_kalist();
        },
        
        clearSearch() {
            this.searchKey = '';
            this.page = 1;
            this.hasMore = true;
            this.get_kalist();
        }
    }
}
</script>

<style>
/* 引入字体图标 */
@font-face {
    font-family: 'iconfont';
    src: url('https://at.alicdn.com/t/font_2483283_713r01t062k.ttf') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 搜索框样式优化 */
.search-box {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
}

.search-input {
    flex: 1;
    font-size: 26rpx;
    background-color: transparent;
}

.clear-btn {
    margin-left: 20rpx;
    color: #999;
    font-size: 24rpx;
}
</style>    